<template>
  <wxc-tab-bar :tab-titles="tabTitles"
               :tab-styles="tabStyles"
               title-type="icon"
               @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
    <!--The first page content-->
    <div class="item-container" :style="contentStyle">
      <hall-bar></hall-bar>
    </div>

    <!--The second page content-->
    <div class="item-container" :style="contentStyle">
      <kai-bar></kai-bar>
    </div>

    <!-- The third page content-->
    <div class="item-container" :style="contentStyle">
      <bet-bar></bet-bar>
    </div>

    <!-- The fourth page content-->
    <div class="item-container" :style="contentStyle">
      <my-bar></my-bar>
    </div>
  </wxc-tab-bar>
</template>

<style scoped>
  .item-container {
    width: 750px;
    background-color: #f2f3f4;
    /*align-items: center;*/
    /*justify-content: center;*/
  }
</style>
<script>
  import { WxcTabBar, Utils } from 'weex-ui';
  import headerBar from './components/common/headerBar.vue'
  import hallBar from './components/hall/index.vue'
  import betBar from './components/bet/index.vue'
  import kaiBar from './components/kai/index.vue'
  import myBar from './components/my/index.vue'

  // https://github.com/alibaba/weex-ui/blob/master/example/tab-bar/config.js
  import Config from './assets/js/config'

  export default {
    components: { WxcTabBar, headerBar, hallBar, betBar, kaiBar, myBar },
    data: () => ({
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles
    }),
    created () {
      const tabPageHeight = Utils.env.getPageHeight();
      // If the page doesn't have a navigation bar
      // const tabPageHeight = env.deviceHeight / env.deviceWidth * 750;
      const { tabStyles } = this;
      this.contentStyle = { height: (tabPageHeight - tabStyles.height) + 'px' };
    },
    methods: {
      wxcTabBarCurrentTabSelected (e) {
        const index = e.page;
        // console.log(index);
      }
    }
  };
</script>